<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
  $(function(){


    function clickMeClicked(){

      var URL = 'response.php';
      $.ajax({
        url:URL,
        data:{'name':'hello','lastname':'sharma','id':25},
        dataType:'json',
        type:'post',
        beforeSend:function(){$('#loader').html('<img src="loader.gif">') },

        success:function(data){
          $.each(data, function(key,value) {
alert(key+'=>'+value);
          })
        },
        complete:function(){
           alert("AFTER SEND");
           $('#loader').html('')
        },
        error: function(xhr,status,error) { alert('Error: ' + status) ; }
      });
    }

    $('#clickme').click(function(){
      //alert("I am clicked");
      clickMeClicked();
    });

  });
</script>
<span id="clickme" style="color:blue;cursor:pointer;"> ClickMe </span>
<span id="loader"></span>
<hr>
<table border="1">
  <tbody><tr>
    <th width="27%" align="left">Name</th>
    <th width="73%" align="left">Value/Description</th>  </tr>
      <tr>
    <td>url</td>
    <td>Specifies the URL to send the request to. Default is the current page<br>
    </td>
    </tr>
      <tr>
    <td>dataType</td>
    <td>The data type expected of the server response.</td>
    </tr>
<tr>
    <td>data</td>
    <td>Specifies data to be sent to the server</td>
    </tr>
<tr>
    <td>type</td>
    <td>Specifies the type of request. (GET or POST)</td>
    </tr>

  <tr>

  <tr>
    <td>beforeSend(<em>xhr</em>)</td>
    <td>A function to run before the request is sent</td>
    </tr>

      <tr>
    <td>success(<em>result,status,xhr</em>)</td>
    <td>A function to be run when the request succeeds</td>
    </tr>

    <tr>
    <td>error(<em>xhr,status,error</em>)</td>
    <td>A function to run if the request fails.</td>
    </tr>


  <tr>
    <td>complete(<em>xhr,status</em>)</td>
    <td>A function to run when the request is finished (after success and error
  functions).<br>
    </td>
    </tr>
</tbody></table>
